<template>
  <div>
      <div class="search-div">
          <el-form label-width="100px" label-position="right">
            <el-row>
                <el-col :span="7">
                    <el-form-item label="登录名：">
                        <el-input v-model="query.username" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="邮箱：">
                        <el-input v-model="query.email" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="真实姓名：">
                        <el-input v-model="query.name" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <div style="padding-top:7px">
                        <el-button type="primary" @click="queryBtn" size="mini">查询</el-button>
                        <el-button @click="reset" size="mini">重置</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="7">
                    <el-form-item label="电话：">
                        <el-input v-model="query.tel" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="注册时间：">
                        <el-date-picker
                            size="mini"
                            v-model="query.daterangeArr"
                            value-format="yyyy/MM/dd hh:mm:ss"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                
            </el-row>
        </el-form>
      </div>

      <div>
          <!--表格数据-->
            <el-table
                :data="page.list"
                border
                :row-style="iRowStyle"
                :cell-style="iCellStyle"
                :header-row-style="iHeaderRowStyle"
                :header-cell-style="iHeaderCellStyle"
                class="tableStyle"
                style="width: 100%">
                 <template v-for="(item,index) in columns">
                    <el-table-column
                    :prop="item.property"
                    :label="item.lable"
                    :width="item.width"
                    :fixed="item.fixed"
                    :key="index">
                    </el-table-column>
                </template>
                <el-table-column
                    label="状态">
                    <template slot-scope="scope">
                        {{formatStatus(scope.row.status)}}
                    </template>
                </el-table-column>
                
                <el-table-column
                fixed="right"
                label="操作"
                width="150">
                <template slot-scope="scope">
                    <el-button @click="freeze(scope.row,scope.$index)" type="text" size="small">{{freezeWord(scope.row.status)}}</el-button>
                    <el-button @click="restePass(scope.row)" type="text" size="small">重置密码</el-button>
                </template>
                </el-table-column>
            </el-table>
            <!--分页组件-->
            <div style="padding:20px;">
                <el-pagination
                align="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.pageNo"
                :page-sizes="pageSizes"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.count">
                </el-pagination>
            </div>
      </div>
  </div>
</template>

<script>
import { getCustomerList, resetPassWord, freezeCustomer } from '@/server/index.js'
export default {
    components: {},
    data() {
       return {
           query:{
               pageSize:10,
               pageNo:1,
               username:'',
               tel:'',
               email:'',
               name:'',
               daterangeArr:null
           },
           page:{
               pageSize:10,
               pageNo:1,
               list:[],
               count:0
           },
           pageSizes:[1,5,10,30,50,100],
           columns:[
                {
                    property:"username",
                    lable:"登录名",
                    width:"110"
                },
                {
                    property:"name",
                    lable:"真实姓名",
                    width:"100"
                },
                {
                    property:"sex",
                    lable:"性别",
                    width:"100"
                },
                {
                    property:"age",
                    lable:"年龄",
                    width:"80"
                },
                {
                    property:"tel",
                    lable:"联系电话",
                    width:"150"
                },
                {
                    property:"email",
                    lable:"邮箱",
                    width:"200"
                },
                {
                    property:"createDate",
                    lable:"注册日期",
                    width:"200"
                }
            ],
            
       };
    },
    methods: {
        queryBtn () {
            // 查询按钮
            console.log("query",this.query);
            getCustomerList(this.query).then((res)=>{
                this.page.list = res.data.list;
                this.page.pageSize = res.data.pageSizes;
                this.page.pageNo = res.data.pageNo;
                this.page.count = res.data.count;
            });
        },
        reset () {
            // 重置
            this.query.username = '';
            this.query.tel = '',
            this.query.email = '',
            this.query.daterangeArr = null,
            this.query.name = ''
        },
        handleSizeChange (pageSize) {
            // 改变数据条数
            this.page.pageSize = pageSize;
            getCustomerList(this.page).then((res)=>{
               this.page.list = res.data.list;
               this.page.count = res.data.count;
               this.page.pageSize = res.data.pageSize;
            });
        },
        handleCurrentChange (pageNo) {
            // 改变页数
            this.page.pageNo = pageNo;
            getCustomerList(this.page).then((res)=>{
               this.page.list = res.data.list;
               this.page.count = res.data.count;
               this.page.pageSize = res.data.pageSize;
            });
        },
        freeze (rowData,index) {
            if(rowData.status == 0){
                let dto = {id:rowData.id,status:1};
                freezeCustomer(dto).then(()=>{
                    this.page.list[index].status=1;
                    this.$message.success("冻结成功");
                }).catch(()=>{
                 this.$message.error("系统错误，冻结失败");
                });
            }else{
                let dto = {id:rowData.id,status:0};
                freezeCustomer(dto).then(()=>{
                    this.page.list[index].status=0;
                    this.$message.success("解冻成功");
                }).catch(()=>{
                 this.$message.error("系统错误，解冻失败");
                });
            }
        },
        restePass (rowData) {
            // 重置密码
            let dto = {id:rowData.id};
            resetPassWord(dto).then((res)=>{
                this.$message.success("重置成功");
            }).catch(()=>{
                 this.$message.error("系统错误，重置失败");
            });
        },
        getInit(){
            getCustomerList(this.query).then((res)=>{
               this.page.list = res.data.list;
               this.page.count = res.data.count;
               this.page.pageSize = res.data.pageSize;
            });
        },
        iRowStyle:function ({row, rowIndex}) {
            return 'height:30px';
        },
        iHeaderRowStyle:function ({row, rowIndex}) {
            return 'height:30px';
        },
        iCellStyle:function ({row, column, rowIndex, columnIndex}) {
            return 'padding:5px'
        },
        iHeaderCellStyle:function ({row, column, rowIndex, columnIndex}) {
            return 'padding:5px'
        },
        formatStatus:function(data){
            if(data == 0){
                return "正常";
            }else{
                return "已冻结";
            }
        },
        freezeWord:function(data){
            if(data == 0){
                return "冻结";
            }else{
                return "解冻";
            }
        }
    },
    created() {
        this.getInit();
    }
};
</script>

<style scoped>
.search-div{
    padding:10px 0px 0px 0px;
    margin-bottom: 15px;
    border-bottom:#B3C0D1 1px solid;
}
</style>